import React from 'react';
import tools from '../../common/tools';

const dbtypes = [
    {name:'选择数据库类型',value:''},
    {name:'MySQL',value:'mysql'},
    {name:'Oracle',value:'oracle'},
    {name:'SQL Server',value:'sqlserver'},
    {name:'MongoDB',value:'mongodb'},
    {name:'PostgreSQL',value:'postgresql'}
];

const dbport = {
    mysql:3306,
    oracle:1521,
    mongodb:27001,
    postgresql:5432
};

class DBconfig extends React.Component {
    constructor(props){
        super();
        this.control=null;
        this.state={
                        db_type:'',
                        db_ip:'',
                        db_port:'',
                        db_name:'',
                        db_username:'',
                        db_password:''
                    };
        this.btns=[
            {name:'取消', evt:'cancel'},
            {name:'测试链接', evt:'test'},
            {name:'保存', evt:'save'}
        ];
        if(props.control!=undefined){
            this.initControl(props.control);
        }
        this.handleClick = this.handleClick.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }
    initControl(hooks){
        let that=this;
        this.control=hooks;
        this.control.addHook('show',function(data){
            let params=data.params;
            if(params!=undefined){
                that.setState(params.state);
                if(typeof params.callback==='function') that.callback=params.callback;
            }
            $('#g_dbconfigbox').modal('show');
        });
        this.control.addHook('hide',function(){
            $('#g_dbconfigbox').modal('hide');
        });
    }
    render(){
        let that=this;
        return (
            <div id="g_dbconfigbox" className="modal fade" style={{display:"none"}} >
                <div className="modal-dialog">
                    <div className="modal-content">
                    <div className="modal-header">
                        <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 className="modal-title">数据源配置</h4>
                    </div>
                    <div className="modal-body">
                        <form className="form-horizontal">
                            <div className="form-group">
                                <label for="db_type" className="col-sm-2 control-label">类型</label>
                                <div className="col-sm-10">
                                    <select className="form-control" id="db_type" value={that.state.db_type} onChange={this.handleChange}>
                                        {
                                            dbtypes.map(e=>{
                                                return <option key={e.value} value={e.value}>{e.name}</option>
                                            })
                                        }
                                    </select>
                                </div>
                            </div>
                            <div className="form-group">
                                <label for="db_ip" className="col-sm-2 control-label">地址</label>
                                <div className="col-sm-10">
                                <input type="text" className="form-control" id="db_ip" placeholder="请输入数据库地址，如：127.0.0.1" value={this.state.db_ip} onChange={this.handleChange}/>
                                </div>
                            </div>
                            <div className="form-group">
                                <label for="db_port" className="col-sm-2 control-label">端口</label>
                                <div className="col-sm-10">
                                <input type="text" className="form-control" id="db_port" placeholder="请输入数据库端口，如：3306" value={this.state.db_port} onChange={this.handleChange}/>
                                </div>
                            </div>
                            <div className="form-group">
                                <label for="db_name" className="col-sm-2 control-label">名称</label>
                                <div className="col-sm-10">
                                <input type="text" className="form-control" id="db_name" placeholder="请输入数据库名称，如：user" value={this.state.db_name} onChange={this.handleChange}/>
                                </div>
                            </div>
                            <div className="form-group">
                                <label for="db_username" className="col-sm-2 control-label">用户名</label>
                                <div className="col-sm-10">
                                <input type="text" className="form-control" id="db_username" placeholder="请输入数据库用户名，如：root" value={this.state.db_username} onChange={this.handleChange}/>
                                </div>
                            </div>
                            <div className="form-group">
                                <label for="db_password" className="col-sm-2 control-label">密码</label>
                                <div className="col-sm-10">
                                <input type="password" className="form-control" id="db_password" placeholder="请输入数据库密码" value={this.state.db_password} onChange={this.handleChange}/>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div className="modal-footer">
                        {
                            this.btns.map(e=>{
                                let cls=tools.getBtnCls(e.evt);
                                return <button type="button" className={cls} key={e.evt} data-evt={e.evt} onClick={that.handleClick} >{e.name}</button>
                            })
                        }
                    </div>
                    </div>
                </div>
            </div>
        );
    }
    handleClick(e){
        let that=this;
        let evt=e.target.getAttribute('data-evt');
        if(this.control!==null){
            this.control.dispatch('callback',{
                evt:evt,
                data:this.state
            });
        }
        if(evt!=='test'){
            that.control.dispatch('hide');
        }
    }
    handleChange(e){
        let that=this;
        let key=e.target.getAttribute('id');
        let filed={};
        filed[key]=e.target.value;
        this.setState(filed);
    }
}

export default DBconfig;